<template>
  <div class="main-con">
    <el-form :inline="true" :model="query">
      <el-form-item label="评论时间">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
        />
      </el-form-item>
      <el-form-item label="动态类型">
        <el-select
          v-model="query.fileType"
          placeholder="请选择"
          style="width: 100px;"
        >
          <el-option label="图文" :value="1"/>
          <el-option label="视频" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="search">查询</el-button>
        <el-button plain @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="tableData.list || []"
      border
      :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
      tooltip-effect="dark"
      style="width: 100%"
      class="dataTable"
    >
      <el-table-column prop="remark" label="动态文案"/>
      <el-table-column prop="fileType" label="动态类型" width="120">
        <template #default="scope">
          <span v-if="scope.row.fileType == 1">图文</span>
          <span v-if="scope.row.fileType == 2">视频</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="评论用户名" width="130"/>
      <el-table-column prop="content" label="评论内容"/>
      <el-table-column prop="replyCount" label="回复数" width="120"/>
      <el-table-column prop="createTime" label="评论时间" width="170"/>
      <el-table-column label="操作" show-overflow-tooltip width="170">
        <template #default="scope">
          <el-button type="primary" link @click="handleTableItem(scope.row, 1)">详情</el-button>
          <el-popconfirm
            title="确认删除？"
            @confirm="del(scope.row)"
          >
            <template #reference>
              <el-button type="danger" link>删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" link @click="handleTableItem(scope.row, 2)">回复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="tableData.total"
      style="margin: 20px 0 0 0;"
      @size-change="val => {handlePageChange(val, 'pageSize')}"
      @current-change="val => {handlePageChange(val, 'page')}"
    />
    <el-dialog
      v-model="visible"
      width="500px"
      align-center
      :show-close="false"
      :close-on-click-modal="false"
      class="reply-dialog"
    >
      <el-form
        :model="formData"
        ref="formRef"
        :rules="rules"
      >
        <el-form-item prop="content">
          <el-input
            type="textarea"
            v-model="formData.content"
            :autosize="{minRows: 6, maxRows: 6}"
            resize="none"
            placeholder="请输入回复内容"
          />
        </el-form-item>
        <el-form-item style="margin-top: 30px;" label-width="170px">
          <el-button plain @click="close">取消</el-button>
          <el-button type="primary" @click="reply(formRef)">确认</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
    <ReplyComp ref="infoRef" @reload="search"/>
  </div>
</template>

<script setup>
import {ref, reactive, onBeforeMount} from "vue";
import moment from 'moment';
import ReplyComp from "./replyComp.vue";
import {
  recommendQuery,
  recommendDel,
  recommendReply
} from "@/api/content";

const  defaultQuery = {
  fileType: "",
  startTime: '',
  endTime: '',
  page: 1,
  pageSize: 10,
}
const visible = ref(false);
const loading = ref(false);
const query = ref(
  {...defaultQuery}
)
const date = ref('')
const tableData = reactive({
  total: 0,
  list: []
})
const formData = ref({
  content: '',
  targetCommentId: ''
})
const formRef = ref(null);
const rules = ref({
  content: [{ required: true, message: '请输入文案', trigger: 'blur' }]
})
const infoRef = ref(null);


onBeforeMount(() => {
  search();
})

const search = async() => {
  loading.value = true;
  if(date.value&&date.value[0]) {
    query.value.startTime = moment(date.value[0]).format("YYYY-MM-DD HH:mm:ss");
    query.value.endTime = moment(date.value[1]).format("YYYY-MM-DD HH:mm:ss");
  }
  const {code, data} = await recommendQuery(query.value);
  if(code==='') {
    Object.assign(tableData, data);
  }
  loading.value = false;
}
function reset() {
  date.value = '';
  query.value = {...defaultQuery};
  search();
}

function handlePageChange(val, type) {
  query.value[type] = val;
  search();
}

// 删除评论
function del (row) {
  ElMessageBox.confirm('确认删除该评论？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async() => {
      const {code} = await recommendDel({recommendCommentId: row.recommendCommentId});
      if(code==='') {
        reset();
        ElMessage({
          message: '删除成功',
          type: 'success',
        });
      }
    })
    .catch(() => {})
}
// 详情和回复
function handleTableItem({recommendCommentId=''}, type) {
  if(type===2) {
    visible.value = true;
    formData.value.targetCommentId = recommendCommentId;
  } else {
    infoRef.value.search(recommendCommentId)
  }
}
//回复评论
const reply = async(formEl) => {
  if (!formEl) return
  await formEl.validate(async(valid) => {
    if(valid) {
      const {code} = await recommendReply(formData.value);
      if(code==='') {
        close();
        search();
        ElMessage({
          message: '回复成功',
          type: 'success',
        });
      }
    } else {
      return false;
    }
  })
}
function close() {
  visible.value = false;
  formData.value = {
    content: '',
    targetCommentId: ''
  };
}
</script>

<style scoped lang="scss">
.main-con {
  padding: 20px;
  margin-top: 20px;
  background: #FFFFFF;
}
:deep(.reply-dialog) {
  .el-dialog__header {
    background-color: #FFFFFF;
    padding: 20px;
    padding-bottom: 20px;
    .el-dialog__close {
      color: rgba(0,0,0,.5);
    }
  }
  .el-dialog__headerbtn:focus,.el-dialog__headerbtn:hover {
    .el-dialog__close,.el-dialog__close {
      color: #3182bd;
    }
  }
}
</style>
